<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="pyq">
        <table border="1px" width="400px">
            <tr>
                <th>昵称</th>
                <th>头像</th>
                <th>文字内容</th>
                <th>图片</th>
                <th>点赞人</th>
            </tr>
            <tr v-for="pyq in pyqs">
                <td>{{pyq.user.nickname}}</td>
                <td>
                    <img src="http://localhost:8080/pet-images/pyq.user.image">
                </td>
                <td>{{pyq.content}}</td>
                <td>
                    <img src="http://localhost:8080/pet-images/pyq.image">
                </td>
                <td>
                    <span v-for="zan in pyq.zanUsers">{{zan.nickname}}</span>
                </td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
           el:"#pyq",
           data:{
               pyqs:[] //朋友圈数据
           },
            methods:{
               //加载朋友圈
               loadPyqs:function () {
                   //访问后台查询朋友圈的接口
                   axios.get("http://localhost:8080/pyq/pyqs")
                        .then(res => {
                            //将朋友圈数据赋值给集合
                            this.pyqs = res.data;
                        });
               }
            },
            //挂载生命周期函数
            mounted(){
                this.loadPyqs();
            }
        });
    </script>
</body>
</html>